<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/templates/maintemplate.xhtml">

	<ui:define name="content">
		<h:form styleClass="center60pct" id="enrollFormId">
			<div class="highLight">
				<h:panelGrid columns="3" columnClasses="thNarrow" styleClass="loginPanelGrid">
					<f:facet name="header">
						<h:outputText value="#{msgs.user_reg_sign_up}" styleClass="title" />
					</f:facet>
					<h:outputLabel value="#{msgs.userid}"></h:outputLabel>
					<p:inputText id="userid" value="#{userBackingBean.user.userId}">
						<f:validateBean validationGroups="com.junhong.forum.constaint.group.EnrollGroup"></f:validateBean>
						<p:ajax process="@this" update="userIdErr" event="valueChange"></p:ajax>
					</p:inputText>
					<p:message id="userIdErr" for="userid"></p:message>

					<h:outputLabel value="#{msgs.password}"></h:outputLabel>
					<p:password id="password" value="#{userBackingBean.user.password}">
						<p:ajax process="@this" update="passwordErr" event="valueChange"></p:ajax>
					</p:password>
					<p:message id="passwordErr" for="password"></p:message>

					<h:outputLabel value="#{msgs.passwordagain}"></h:outputLabel>
					<p:password id="passwordagain" value="#{userBackingBean.user.passwordagain}" validator="#{userBackingBean.checkPasswordMatch}">
						<p:ajax process="password passwordagain" update="passwordagainErr" event="valueChange"></p:ajax>
					</p:password>
					<p:message id="passwordagainErr" for="passwordagain"></p:message>

					<h:outputLabel value="#{msgs.email}"></h:outputLabel>
					<p:inputText id="email" value="#{userBackingBean.user.email}">
						<f:ajax execute="@this" render="emailErr" event="valueChange"></f:ajax>
					</p:inputText>
					<p:message id="emailErr" for="email"></p:message>

					<h:outputText></h:outputText>
					<h:panelGroup>
						<p:commandButton value="#{msgs.createuser}" action="#{userBackingBean.enroll()}" ajax="false" partialSubmit="false"></p:commandButton>
						<p:commandButton value="Reset" type="reset"></p:commandButton>
					</h:panelGroup>
				</h:panelGrid>
			</div>

		</h:form>

	</ui:define>


</ui:composition>

</html>